<script>
import { computed, defineComponent } from 'vue';
import MpHtml from './mp-html/mp-html.vue';

import { createNamespace, transformStyleSize } from '../utils';

export default defineComponent({
  name: createNamespace('RichText')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true,
  },
  components: { MpHtml },
  props: {
    // html 字符串
    content: String,
  },
  setup(props) {

    const isHtml = computed(() => {
      const reg = /<[^>]+>/g;
      return reg.test(props.content || '');
    });

    return { isHtml };
  },
});
</script>

<template>
  <view class="fan-rich-text" :class="{ pre: !isHtml }">
    <MpHtml :content="content" lazy-load selectable show-img-menu />
  </view>
</template>

<style lang="less">
.fan-rich-text {
  color: #666;
  line-height: 1.6;
  word-break: break-all;

  &.pre {
    white-space: pre-wrap;
  }

  // * 貌似不管用
  image,
  view,
  video,
  navigator {
    max-width: 100%;
  }
}
</style>
